<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="50%"
  >
    <el-form
      ref="form"
      :model="form"
      label-width="100px"
      label-suffix="："
    >
      <el-form-item
        label="卡劵名称"
        prop="name"
        :rules="[{required: true, message: '请输入卡劵名称'}]"
      >
        <el-input
          size="small"
          v-model="form.name"
          placeholder="请输入卡劵名称"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="卡劵面值"
        prop="price"
        :rules="[{required: true, message: '请输入卡劵名称'}]"
      >
        <el-input
          size="small"
          v-model="form.price"
          placeholder="请输入卡劵面值"
        ></el-input>
      </el-form-item>

      <el-form-item
        label="有限期"
        prop="time_begin"
        :rules="[{required: true, message: '请选择有限期'}]"
      >
        <el-date-picker
          v-model="date"
          size="small"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item
        label="数量"
        :rules="[{required: true, message: '请输入卡劵面值'}]"
      >
        <el-input
          size="small"
          v-model="form.count"
          placeholder="请输入卡劵数量"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="场景"
      >
        <el-radio-group v-model="form.scene">
          <el-radio
            v-for="scene in couponScene"
            :key="scene.value"
            :label="scene.value"
          >
            {{scene.label}}
          </el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button
        size="small"
        @click="dialogVisible = false"
      >
        取 消
      </el-button>
      <el-button
        size="small"
        type="primary"
        :loading="submit_loading"
        @click="ensureEdit"
      >
        确 定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
  /**
   * @Author: lifuzhao
   * @Date: 2019-07-20
   * @Project: driver
   */
  import {timeFormat, couponScene} from "../../../constant";
  import dayjs from 'dayjs'

  export default {
    name: "edit"
    , data() {
      return {
        timeFormat
        , couponScene
        , dialogVisible: false
        , coupon: {}
        , form: {
          name: ''
          , price: ''
          , time_begin: ''
          , time_end: ''
          , count: ''
          , scene: 1
        }
        , date: []
        , submit_loading: false
      }
    }
    , computed: {
      isEdit() {
        let coupon = this.coupon
        return coupon.id && coupon.id > 0
      }
      , title() {
        let coupon = this.coupon
        return this.isEdit ? '正在编辑 ' + coupon.name : '新增优惠券'
      }
      , url() {
        return this.isEdit ? '/api/v1/ticket/update' : '/api/v1/ticket/save'
      }
    }
    , watch: {
      date: {
        deep: true
        , handler(date) {
          let start = ''
            , end = ''
            , format = 'YYYY-MM-DD HH:mm:ss'
          if (date) {
            [start, end] = date
          }
          if (start instanceof Date) {
            start = dayjs(start).format(format)
          }
          if (end instanceof Date) {
            end = dayjs(end).format(format)
          }
          this.form.time_begin = start
          this.form.time_end = end
        }
      }
      , dialogVisible(bool) {
        this.$fn.setTitle(bool ? this.title : '卡劵设置')
      }
    }
    , mounted() {
      this.init()
    }
    , methods: {
      init() {
        this.$bus.$on('coupon-edit', coupon => {
          this.dialogVisible = true
          this.coupon = coupon
          Object.keys(this.form).forEach(key => {
            let defaultValue = ''
            if (key === 'scene') {
              defaultValue = 1
            }
            this.form[key] = coupon[key] || defaultValue
          })
          if (coupon.time_begin && coupon.time_end) {
            this.date = [dayjs(coupon.time_begin, this.timeFormat).toDate(), dayjs(coupon.time_end, this.timeFormat).toDate()]
          }
          this.$nextTick(() => {
            this.$refs.form && this.$refs.form.clearValidate()
          })
        })
      }
      , ensureEdit() {
        this.$refs.form.validate(valid => {
          if (!valid) return
          let coupon = this.coupon
            , form = this.$fn.deepClone(this.form)
          if (coupon.id) {
            form.id = coupon.id
          }
          this.submit_loading = true
          this.$axios.post(this.url, form)
            .then(res => {
              if (res.success) {
                this.$message({
                  message: '操作成功'
                  , type: 'success'
                })
                this.dialogVisible = false
                this.$bus.$emit('coupon-list-update')
              } else {
                this.$message({
                  message: '操作失败' + res.msg
                  , type: 'error'
                })
              }
            })
            .catch(() => {
              this.$message({
                message: '操作失败，请稍后再试'
                , type: 'error'
              })
            })
            .finally(() => {
              this.submit_loading = false
            })
        })
      }
    }
  }
</script>

<style scoped>

</style>